<!--
 * @Author: 'Chenfarry' '2925102113@qq.com'
 * @Date: 2024-08-13 09:46:03
 * @LastEditors: chenhuanhuan 2925102113@qq.com
 * @LastEditTime: 2024-11-18 12:28:35
 * @FilePath: \orderApp\packageOne\pages\historicalRecipes\recipeDetail.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<route lang="json5" type="page">
{
  style: {
    navigationStyle: 'custom',
    navigationBarTextStyle: 'black',
    navigationBarTitleText: '历史食谱',
  },
}
</route>
<template>
  <view class="wrap">
    <cu-navbar title="历史食谱"></cu-navbar>
    <view class="flex-1">
      <cu-card margin="15rpx 0 0 0" radius="15rpx 0 0 0 ">
        <view class="flex flex-items-center mb-4">
          <p class="tit">食谱详情</p>
          <p class="time">{{ info.start }} — {{ info.end }}</p>
        </view>
        <!-- 星期数 -->
        <view class="clendarBox cu-flex">
          <view
            v-for="(item, index) in weeksList"
            :key="index"
            class="clenderItem cu-flex flex-col"
            :class="index == curWeekInfo.weekIdx ? 'weekActive' : ''"
            @click="changeWeek(item, index)"
          >
            <text class="weeks">{{ item.week }}</text>
            <text class="days">{{ dayjs(item.day).format('MM/DD') }}</text>
          </view>
        </view>
        <!-- 餐次列表 -->
        <view class="mealBox flex">
          <view
            v-for="(item, index) in mealList"
            class="mealItem"
            :class="index == curMeal ? 'mealActive' : ''"
            :key="index"
            @click="changeMeal(index)"
          >
            {{ item.name }}
          </view>
        </view>

        <!-- 菜肴列表 -->
        <view class="menuBox flex" v-if="dishesList.length > 0">
          <view class="menuItem" v-for="(item, index) in dishesList" :key="index">
            <view class="imgBox">
              <uv-image
                :src="item.dishUrl"
                width="100%"
                height="100%"
                radius="10"
                :observeLazyLoad="true"
              >
                <template v-slot:loading>
                  <uv-loading-icon color="#d9dede"></uv-loading-icon>
                </template>
              </uv-image>
            </view>
            <p class="name ellipsis">{{ item.dishName }}</p>
            <view class="flex comBox">
              <p class="sub-tit">评价:</p>
              <uv-rate
                :allowHalf="true"
                :readonly="true"
                active-color="#FAD20C"
                inactive-color="#DCDEE0"
                gutter="0"
                size="16"
                :value="item.dishStar / 2"
              ></uv-rate>
            </view>
          </view>
        </view>
        <view v-else>
          <cu-empty></cu-empty>
        </view>
      </cu-card>
    </view>
  </view>
</template>

<script lang="ts" setup>
import dayjs from 'dayjs'
import 'dayjs/locale/zh-cn'
dayjs.locale('zh-cn')

import { reqRecipeDtl } from '@/service/business/goods'

const weeksOrigin = () => [
  { week: '周一', day: '', sign: 'one' },
  { week: '周二', day: '', sign: 'two' },
  { week: '周三', day: '', sign: 'three' },
  { week: '周四', day: '', sign: 'four' },
  { week: '周五', day: '', sign: 'five' },
  { week: '周六', day: '', sign: 'six' },
  { week: '周日', day: '', sign: 'seven' },
]
const weeksList = ref(weeksOrigin())

const formatWeek = () => {
  // // 使用一个数组来存储本周的日期
  const startOfWeek = dayjs(info.value.start)
  // // 从起始日期开始，向后依次添加每一天的日期到数组中
  for (let i = 0; i < 7; i++) {
    weeksList.value[i].day = startOfWeek.add(i, 'day').format('YYYY-MM-DD')
  }
}

// 当前星期数标识
const curWeekInfo = ref({
  weekIdx: 0,
  weeksTime: 'one',
})

// 当前餐次标识
const curMeal = ref(0)

// 切换星期数
const changeWeek = (item, index) => {
  curWeekInfo.value.weekIdx = index
  curWeekInfo.value.weeksTime = item.sign
  getRecipeDtl()
}
// 切换餐次
const changeMeal = (index) => {
  curMeal.value = index
  getRecipeDtl()
}

const mealList = ref([
  { name: '早餐', id: '' },
  { name: '中餐', id: '' },
  { name: '晚餐', id: '' },
])
const dishesList = ref([])

const getRecipeDtl = () => {
  let params = {
    recipeId: info.value.id,
    mealTime: curMeal.value,
    weeksTime: curWeekInfo.value.weeksTime,
    eatDate:weeksList.value[curWeekInfo.value.weekIdx].day,
  }
  reqRecipeDtl(params).then((res) => {
    if (res.retCode == 2000) {
      dishesList.value = res.data || []
    }
  })
}

// 传递过来的食谱信息
const info = ref({})
onLoad((options) => {
  info.value = { ...options }
  formatWeek()
  getRecipeDtl()
})
</script>

<style lang="scss" scoped>
.wrap {
  height: 100vh;
  display: flex;
  flex-direction: column;
}
.tit {
  font-weight: 600;
  font-size: 31rpx;
  color: #111111;
}
.time {
  font-weight: 400;
  font-size: 23rpx;
  color: #969799;
  margin-left: 24rpx;
}
.clendarBox {
  justify-content: space-between;

  .clenderItem {
    width: 85rpx;
    height: 91rpx;
    background: #f9f9f9;
    border-radius: 8rpx;

    .weeks {
      font-weight: 600;
      font-size: 23rpx;
      color: #323233;
      line-height: 38rpx;
    }

    .days {
      font-weight: 400;
      font-size: 23rpx;
      color: #969799;
      line-height: 38rpx;
    }
  }
  .weekActive {
    background: #00754a;

    .weeks,
    .days {
      color: #fff;
    }
  }
}

.mealBox {
  margin: 23rpx 0;
  .mealItem {
    font-weight: 400;
    font-size: 23rpx;
    color: #595a5b;
    line-height: 38rpx;
    margin-right: 46rpx;
  }
  .mealActive {
    font-weight: bold;
    font-size: 27rpx;
    color: #00754a;
  }
}

.menuBox {
  flex-wrap: wrap;
  justify-content: space-between;

  .menuItem {
    width: 32%;
    height: 250rpx;
    margin-bottom: 24rpx;
    box-shadow:
      0rpx 4rpx 8rpx -2rpx rgba(0, 0, 0, 0.1),
      0rpx 2rpx 23rpx 0rpx rgba(0, 0, 0, 0.05);
    border-radius: 15rpx;
    // margin-right: 2%;

    .imgBox {
      width: 100%;
      height: 65%;
    }

    .name {
      font-weight: 400;
      width: 100%;
      font-size: 27rpx;
      color: #111111;
      line-height: 42rpx;
      padding: 0 6rpx;
      box-sizing: border-box;
    }
    .comBox {
      padding: 0 6rpx;
      display: flex;
      // justify-content: center;
      align-items: center;
      .sub-tit {
        font-weight: 400;
        font-size: 19rpx;
        color: #969799;
        padding-right: 3rpx;
        text-align: left;
      }
    }
  }
  .menuItem:last-child:nth-child(3n-1) {
    margin-right: calc(32% + 3% / 2);
  }

  .menuItem:last-child:nth-child(3n-2) {
    margin-right: calc(64% + 6% / 2);
  }
}
</style>
